<script setup lang="ts">
import {computed, onMounted, ref} from 'vue'
import {Local, Session} from '@/utils/storage'

interface Row {
  title: string
  hot: string
  index: number
  url: string
  mobilUrl: string
}

interface DataRowContent {
  data: Row[]
  name: string
  subtitle: string
  update_time: string
}

const current = ref(Local.get('get_hot_list_all_current') || '百度热点')
const items = ref<DataRowContent[]>(Session.get('get_hot_list_all') || [])
const currentItem = computed(() => {
  return items.value.find(f => f.name === current.value)
})

const onFetch = async () => {
  const {data} = await fetch('https://api.vvhan.com/api/hotlist/all').then(res => res.json())
  if (data.length) {
    items.value = data
    Session.set('get_hot_list_all', data)
  }
}

const onChange = () => {
  Local.set('get_hot_list_all_current', current.value)
}

const openPage = (item: Row) => {
  window.open(item.url)
}

onMounted(() => {
  if (!items.value.length) onFetch()
})

</script>

<template>
  <div class="w100 h100 home-hot flex flex-column">
    <div class="flex align-center justify-between border-default-bottom pa5">
      <span>热搜热榜聚合</span>
      <el-select v-model="current" style="width: 130px" @change="onChange">
        <el-option v-for="(item, index) in items" :key="index" :label="`${item.name} [${item.subtitle}]`"
                   :value="item.name"/>
      </el-select>
    </div>
    <el-scrollbar class="flex-grow-1" v-if="currentItem">
      <div v-for="(item, index) in currentItem.data" :key="index"
           class="current-item flex justify-between pa5 cursor-pointer cursor-pointer-line"
           @click="openPage(item)">
        <div class="flex-shrink" style="width: 27px">{{ index + 1 }}.</div>
        <div class="flex-grow">{{ item.title }}</div>
        <span class="ml-auto flex-shrink">{{ item.hot }}</span>
      </div>
    </el-scrollbar>
    <el-empty v-else :image-size="30" description="加载中..."></el-empty>
  </div>
</template>
<style lang="scss" scoped>
.home-hot {
  box-sizing: border-box;

  .current-item:nth-child(even) {
    background-color: var(--el-fill-color-lighter);
  }
}
</style>
